<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0036)http://www.whzxcf.com/page-app.shtml -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>迅泊达手机客户端-${_front_title}</title>
	<meta name="keywords" content="${_front_keywords}" />
    <meta name="description" content="${_front_description}" />
    <link rel="shortcut icon" href="/static/favicon.ico"/>
<link rel="stylesheet" type="text/css" href="${_front_css}/base.css">
<script type="text/javascript" src="${_front_js}/jquery.min.js"></script>
<script src="${_front_js}/scrollReveal.js"></script>
<style>
.box-mod {
	background:#f2f2f2;
	height:470px;
}
.box, .wrap {
	width:1000px;
	margin:0 auto;
}
.box {
	position:relative;
	height:470px;
	
}
#mod3 {
	height:510px;
}

.appBan{ width:100%; height:601px; background:#fd561c url(${_front_images}/app1.png) no-repeat center top; }

/*main*/	
.text1 {
	position:absolute;
	top:130px;
}
.text2 {
	position:absolute;
	top:194px;
	right:0;
}
.text3 {
	position:absolute;
	left:0;
	bottom:104px;
}
.phone1 {
	position:absolute;
	top:30px;
	right:120px;
	z-index:3;
}
.phone2 {
	position:absolute;
	top:76px;
	right:94px;
	z-index:2;
}
.phone3 {
	position:absolute;
	top:93px;
	right:30px;
	z-index:1;
}
.phone4 {
	position:absolute;
	top:36px;
	left:90px;
	z-index:1;
}
.phone6 {
	position:absolute;
	top:258px;
	right:0;
	z-index:1;
}
.phone7 {
	position:absolute;
	top:151px;
	right:80px;
	z-index:2;
}
.phone8 {
	position:absolute;
	top:57px;
	right:178px;
	z-index:3;
}
</style>

</head>
<body>
<script type="text/javascript">	
$(document).ready(function(){
      (function($) {
        'use strict';
        window.scrollReveal = new scrollReveal({ reset: true, move: '50px' });
      })();
});
</script>

<!--头部 star -->
<#include "../base/top.ftl" />
<!--头部 END --> 

<div class="appBan" style="text-align:center;"><img src="${_front_images}/app1.png" width="1190" height="601" border="0" usemap="#Map" />
  <map name="Map" id="Map">
    <area shape="rect" coords="101,266,277,323" href="javascript:;" />
    <area shape="rect" coords="101,336,277,390" href="javascript:;" />
  </map>
</div>
<div class="main" style="border-bottom:1px solid #ddd;">
  <div class="box" id="mod1">
    <h2 class="text1" data-scroll-reveal="enter left over 1s and move 100px" data-scroll-reveal-id="3" style="-webkit-transform: translatex(-100px);transform: translatex(-100px);opacity: 0;-webkit-transition: -webkit-transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;transition: transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;-webkit-perspective: 1000;-webkit-backface-visibility: hidden;;-webkit-transform: translatex(0);transform: translatex(0);opacity: 1;-webkit-transition: -webkit-transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;transition: transform 1s ease-in-out 0s, opacity 1s ease-in-out 0s;-webkit-perspective: 1000;-webkit-backface-visibility: hidden;" data-scroll-reveal-initialized="true"><img src="${_front_images}/h1.jpg"></h2>
    <div class="phone1" data-scroll-reveal="enter top over 1s and move 100px" data-scroll-reveal-id="4" style="-webkit-transform: translatey(-100px);transform: translatey(-100px);opacity: 0;-webkit-transition: -webkit-transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;transition: transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;-webkit-perspective: 1000;-webkit-backface-visibility: hidden;;-webkit-transform: translatey(0);transform: translatey(0);opacity: 1;-webkit-transition: -webkit-transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;transition: transform 1s ease-in-out 0s, opacity 1s ease-in-out 0s;-webkit-perspective: 1000;-webkit-backface-visibility: hidden;" data-scroll-reveal-initialized="true"><img src="${_front_images}/img1.png"></div>
    <div class="phone2" data-scroll-reveal="enter top over 1s and move 100px" data-scroll-reveal-id="5" style="-webkit-transform: translatey(-100px);transform: translatey(-100px);opacity: 0;-webkit-transition: -webkit-transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;transition: transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;-webkit-perspective: 1000;-webkit-backface-visibility: hidden;;-webkit-transform: translatey(0);transform: translatey(0);opacity: 1;-webkit-transition: -webkit-transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;transition: transform 1s ease-in-out 0s, opacity 1s ease-in-out 0s;-webkit-perspective: 1000;-webkit-backface-visibility: hidden;" data-scroll-reveal-initialized="true"><img src="${_front_images}/img2.png"></div>
    <div class="phone3"><img src="${_front_images}/img3.png"></div>
  </div>
  <div class="box-mod">
    <div class="box" id="mod2">
      <div class="phone4" data-scroll-reveal="enter left over 1s and move 200px" data-scroll-reveal-id="6" style="-webkit-transform: translatex(-200px);transform: translatex(-200px);opacity: 0;-webkit-transition: -webkit-transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;transition: transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;-webkit-perspective: 1000;-webkit-backface-visibility: hidden;;-webkit-transform: translatex(-200px);transform: translatex(-200px);opacity: 0;-webkit-transition: -webkit-transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;transition: transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;-webkit-perspective: 1000;-webkit-backface-visibility: hidden;" data-scroll-reveal-initialized="true"><img src="${_front_images}/img4.png"></div>
      <h2 class="text2" data-scroll-reveal="enter right over 1s and move 200px" data-scroll-reveal-id="7" style="-webkit-transform: translatex(200px);transform: translatex(200px);opacity: 0;-webkit-transition: -webkit-transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;transition: transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;-webkit-perspective: 1000;-webkit-backface-visibility: hidden;;-webkit-transform: translatex(200px);transform: translatex(200px);opacity: 0;-webkit-transition: -webkit-transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;transition: transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;-webkit-perspective: 1000;-webkit-backface-visibility: hidden;" data-scroll-reveal-initialized="true"><img src="${_front_images}/h2.jpg"></h2>
    </div>
  </div>
  <div class="box" id="mod3">
    <h2 class="text3" data-scroll-reveal="enter bottom over 1s and move 200px" data-scroll-reveal-id="8" style="-webkit-transform: translatey(200px);transform: translatey(200px);opacity: 0;-webkit-transition: -webkit-transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;transition: transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;-webkit-perspective: 1000;-webkit-backface-visibility: hidden;;-webkit-transform: translatey(200px);transform: translatey(200px);opacity: 0;-webkit-transition: -webkit-transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;transition: transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;-webkit-perspective: 1000;-webkit-backface-visibility: hidden;" data-scroll-reveal-initialized="true"><img src="${_front_images}/h3.jpg"></h2>
    <div class="phone6" data-scroll-reveal="enter top over 1s and move 200px" data-scroll-reveal-id="9" style="-webkit-transform: translatey(-200px);transform: translatey(-200px);opacity: 0;-webkit-transition: -webkit-transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;transition: transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;-webkit-perspective: 1000;-webkit-backface-visibility: hidden;;-webkit-transform: translatey(-200px);transform: translatey(-200px);opacity: 0;-webkit-transition: -webkit-transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;transition: transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;-webkit-perspective: 1000;-webkit-backface-visibility: hidden;" data-scroll-reveal-initialized="true"><img src="${_front_images}/img6.png"></div>
    <div class="phone7" data-scroll-reveal="enter top over 1s and move 200px" data-scroll-reveal-id="10" style="-webkit-transform: translatey(-200px);transform: translatey(-200px);opacity: 0;-webkit-transition: -webkit-transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;transition: transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;-webkit-perspective: 1000;-webkit-backface-visibility: hidden;;-webkit-transform: translatey(-200px);transform: translatey(-200px);opacity: 0;-webkit-transition: -webkit-transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;transition: transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;-webkit-perspective: 1000;-webkit-backface-visibility: hidden;" data-scroll-reveal-initialized="true"><img src="${_front_images}/img7.png"></div>
    <div class="phone8" data-scroll-reveal="enter top over 1s and move 200px" data-scroll-reveal-id="11" style="-webkit-transform: translatey(-200px);transform: translatey(-200px);opacity: 0;-webkit-transition: -webkit-transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;transition: transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;-webkit-perspective: 1000;-webkit-backface-visibility: hidden;;-webkit-transform: translatey(-200px);transform: translatey(-200px);opacity: 0;-webkit-transition: -webkit-transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;transition: transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;-webkit-perspective: 1000;-webkit-backface-visibility: hidden;" data-scroll-reveal-initialized="true"><img src="${_front_images}/img8.png"></div>
  </div>
</div>

<!--底部开始-->
<#include "../base/foot.ftl" />
<!--底部开始-->

</body>
</html>